<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            background:url('img/222.jpg') no-repeat;
            background-size:cover;
            overflow: hidden;
        }
        .top{
            width:400px;
            height: 100px;
            margin:60px auto;
            color:black;
            font-size:30px;
            font-family: "华文行楷";
        }
        .box{
            height: 310px;
            width: 310px;
            margin: auto;
            perspective: 800px;

        }
        .box .pic{
            position: relative;
            transform-style: preserve-3d;
            animation:play 10s linear infinite;
        }
        .box ul li {
            list-style: none;
            position: absolute;
            top:0;
            left: 0;
        }
        @keyframes play{
            from{
                transform:rotateY(0deg)
            }
            to{
                transform:rotateY(360deg)
            }
        }
        #text{
            width: 500px;
            height: 200px;
            margin:0 auto;
           font-size: 24px;
        }

    </style>
</head>
<body>
    <div class="top">
        <marquee behavior="alternate">魔力转圈圈</marquee>
    </div>
    <div class="box">
        <div class="pic">
            <ul>
                <li><img src="./img/01.png" alt=""></li>
                <li><img src="./img/01.png" alt=""></li>
                <li><img src="./img/01.png" alt=""></li>
                <li><img src="./img/01.png" alt=""></li>
                <li><img src="./img/01.png" alt=""></li>
                <li><img src="./img/01.png" alt=""></li>
            </ul>
        </div>
    </div>
    <div id="text" autostart="true" loop="true">
    
    </div>
    <embed src="0.mp3" hidden="true">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(".pic ul li").each(function(i){
            var deg=360/$(".pic ul li").size();
            $(this).css({
                "transform":"rotateY("+deg*i+"deg) translateZ(100px)"
            });
        });
        var i=0;
        var str="hehe呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵";
        window.onload=function typing(){
            var mdiv=document.getElementById('text');
            mdiv.innerHTML+=str.charAt(i);
            i++;
            var id =setTimeout(typing,300);
            if(i==str.length){
                clearTimeout(id);
            }
        }
        var minSize=5;//小球
        var maxSize=50;//大球
        var newOne=100;//时间
        var flackColor="#000";
        var flak=$("<div class='xh'></div>").css({position:"absolute",
        "top":"0px"}).html('❄');//一个雪花
        var dhight =$(window).height();//视图高度
        var dw=$(window).width();
        setInterval(function(){
            var szflak=minSize+Math.random()*maxSize;//不同大小雪花
            var sLeft=Math.random()*dw;//随机left
            var sOp=0.7+Math.random()*0.3;//随机透明
            var endpositionTop=dhight-100;//top停止
            var endleft=Math.random()*dw;//随机left；
            var sudu=5000+Math.random()*3000;
            flak.clone().appendTo($('body')).css({
                "left":sLeft,
                "opacity":sOp,
                "font-size":szflak,
                "color":flackColor
            }).animate({
                "top":endpositionTop,
                "left":endleft,
                "opacity":0.1,

            },sudu,function(){
                $(this).remove();
            })

        },newOne )

    </script>
</body>
</html>